<template>
  <div class="login">
    <el-card class="login-card">
      <div slot="header" class="clearfix">
        <span>欢迎登录</span>
      </div>
      <div>
        <el-form ref="form" :model="loginReq" @keyup.enter.native="pwdKeydown">
          <el-form-item>
            <el-input placeholder="请输入用户名" v-model="loginReq.username">
              <template slot="prepend">
                <font-awesome-icon icon="user" style="font-size:14px;"/>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input :type="passwordType" placeholder="请输入密码" v-model="loginReq.password">
              <template slot="prepend">
                <font-awesome-icon icon="lock" style="font-size:14px;"/>
              </template>
              <i slot="suffix" class="hsPassword el-input__icon el-icon-view" @click="hsPassword"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="loginReq.rememberMe">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login" style="width:100%">登录</el-button>
          </el-form-item>
        </el-form>
        <p class="login-tip">输入任意用户名和密码即可</p>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      passwordType: "password",
      loginReq: {}
    };
  },
  methods: {
    login() {
      //   this.$emit("login");
      this.$http({
        url: this.$URL_ADDR.my.login,
        method: "POST",
        data: this.loginReq
      })
        .then(() => {
          this.loginSuccess();
        })
        .catch(error => {
          this.$notify({
            type: "error",
            message: error.response.data.title,
            duration: 3000
          });
        });
    },
    hsPassword() {
      if (this.passwordType == "password") {
        this.passwordType = "text";
      } else {
        this.passwordType = "password";
      }
    },
    loginSuccess() {
      this.$http({
        url: this.$URL_ADDR.my.info,
        method: "GET"
      }).then(resp => {
        this.$message({
          message: "欢迎你," + resp.data.login + "!",
          type: "success"
        });
        this.$store.dispatch("account/login", resp.data);
        console.debug("account", this.$store.state);
      });
    },
    pwdKeydown(ev) {
      console.debug(ev);
      this.login();
    }
  }
};
</script>
<style lang="less" scoped>
.login {
  background-color: #252a2f;
  background-position: 50%;
  background-size: cover;
  height: 100%;
  position: relative;
  width: 100%;
  .login-card {
    -webkit-transform: translateY(-60%);
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
    .login-tip {
      color: #c3c3c3;
      font-size: 10px;
      text-align: center;
    }
  }
}
.hsPassword {
  cursor: pointer;
}
</style>
